<template>
    <div class="guessLike" v-if="guessLikeList">
        <h3>猜你喜欢</h3>
        <div class="guessLikeContent">
            <div class="glItems" v-for="(item, index) in guessLikeList" :key="index">
                <div class="glItem" @click="jumpPathTo(item.season_id)">
                    <div class="glItemImg"><img :src="item.vertical_cover" alt="" /></div>
                    <div class="glItemTitle">
                        <span>{{ item.title }}</span>
                    </div>
                    <div class="glItemOther">{{ changeFinish(item.is_finish, item.last_ord, item.total) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { recommend } from "../request";
export default {
    name: "guessLike",
    data() {
        return {
            guessLikeList: [],
        };
    },

    methods: {
        getGuessLike() {
            let index = this.$route.query.id;
            recommend({ comic_id: index }).then((data) => {
                this.guessLikeList = data.data;
            });
        },
        changeFinish(x, y, z) {
            if (x == 0) {
                return "更新至 " + y + " 话";
            } else if (x == 1) {
                return "[完结] 共 " + z + " 话";
            }
        },

        jumpPathTo(x) {
            if (x != this.$route.query.id) {
                this.$emit("sendJPT", { path: `/details/${x}`, query: { id: x } });
                this.getGuessLike();
            }
        },
    },
    mounted() {
        this.getGuessLike();
    },
};
</script>

<style lang="scss" scope>
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";
.guessLike {
    padding-bottom: 1.3333rem;

    height: 11.1467rem;
    margin: 0.4267rem;
    h3 {
        line-height: 1.0667rem;
        height: 1.0667rem;
        font-size: 0.4267rem;
    }
    .guessLikeContent {
        height: 10.08rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        .glItems {
            .glItem {
                height: 4.6133rem;
                margin: 8px;
                box-sizing: border-box;
                .glItemImg {
                    width: 2.62rem;
                    height: 3.5rem;
                    img {
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .glItemTitle {
                    height: 0.48rem;
                    margin-top: 0.2133rem;
                    color: #222;
                    font-size: 0.3733rem;
                    width: 2.62rem;

                    span {
                        display: block;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
                .glItemOther {
                    height: 0.4267rem;
                    color: $color;
                }
                font-size: 0.32rem;
            }
        }
    }
}
</style>
